<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	<meta content="ie=edge" http-equiv="X-UA-Compatible">
	<title>Document</title>
	<style>
		table {
			width: 500px;
			margin: 100px auto;
			border-collapse: collapse;
			text-align: center;
		}

		td,
		th {
			border: 1px solid #333;
		}

		thead tr {
			height: 40px;
			background-color: #ccc;
		}
	</style>
</head>

<body>
<table cellspacing="0">
	<thead>
	<tr>
		<th>姓名</th>
		<th>科目</th>
		<th>成绩</th>
		<th>操作</th>
	</tr>
	</thead>
	<tbody>
	<!-- 表格数据动态生成 -->
	<!-- <tr>
        <td></td>
    </tr> -->
	</tbody>
</table>
<script>
	// 模拟数据：利用对象存储数据

	// 数组对象 datas 可以存储任意类型数据
	// 每个数组元素 datas[i] 都是一个对象
	var datas = [{
		list: [{
			name: '璎珞',
			subject: 'JavaScript',
			score: 100
		},
			{
				name: '璎珞',
				subject: 'Python',
				score: 98
			},
			{
				name: '璎珞',
				subject: 'JavaScript',
				score: 99
			}
		],
	},
		{
			list: [{
				name: '明玉',
				subject: 'J2EE',
				score: 95
			},
				{
					name: '明玉',
					subject: 'Python',
					score: 98
				}
			],
		},
		{
			list: [{
				name: '小明',
				subject: 'JavaScript',
				score: 100
			},
				{
					name: '小明',
					subject: 'Python',
					score: 98
				},
				{
					name: '小明',
					subject: 'JavaScript',
					score: 99
				},
				{
					name: '小明',
					subject: 'J2EE',
					score: 95
				}
			],
		},
	];
	// 2. 获取根节点，往tbody 里面创建行： 有几个人（通过数组的长度）就创建几行
	var tbody = document.querySelector('tbody');
	// 所有数据都是放在 tbody 中的 tr 里面
	for (var i = 0; i < datas.length; i++) { // 外面的for循环管行 tr
		var dlist = datas[i].list;

		for (var n = 0; n < dlist.length; n++) {
			var dn = dlist[n];
			// 1. 创建 tr行
			var tr = document.createElement('tr');
			tbody.appendChild(tr);

			// 2. 行里面创建单元格(跟数据有关系的3个单元格) td 单元格的数量取决于每个对象里面的属性个数  for循环遍历对象 datas[i]
			for (var k in dn) { // 里面的for循环管列 td
				// 创建单元格

				var td = document.createElement('td');
				// 把对象里面的属性值 datas[i][k] 给 td
				// console.log(datas[i][k]);

				if (n == 0) {
					td.innerHTML = dn[k];
					if (k == 'name') {
						td.rowSpan = dlist.length;
					}
					tr.appendChild(td);

				} else if (n != 0 && k != 'name') {
					td.innerHTML = dn[k];
					tr.appendChild(td);
				}

			}
			// 3. 创建有删除两个字的单元格
			var td = document.createElement('td');
			td.innerHTML = '<a href="javascript:;">删除 </a>';
			tr.appendChild(td);

		}
	}
	// 4. 删除操作
	var as = document.querySelectorAll('a');
	for (var i = 0; i < as.length; i++) {
		as[i].onclick = function () {
			// 点击a 删除 当前a 所在的行(绑定单击事件，获取单击对象的父级的父级)  node.removeChild(child)
			tbody.removeChild(this.parentNode.parentNode)
		}
	}
	// for(var k in obj) {
	//     k 得到的是属性名
	//     obj[k] 得到是属性值
	// }
</script>
</body>

</html>
